<template>
  <div>
    <a-modal
      v-model="$parent.visibleItem.road"
      title="轨迹检索"
      okText="检索轨迹"
      cancelText="取消"
      @ok="searchId"
      :width="1000"
    >
      <a-table
        :data-source="data"
        :columns="columns"
        :row-selection="rowSelection"
        :scroll="{ x: 1000, y: 450 }"
        :rowKey="
          (record) => {
            return record.geohash
          }
        "
      >
        <div
          slot="filterDropdown"
          slot-scope="{
            setSelectedKeys,
            selectedKeys,
            confirm,
            clearFilters,
            column
          }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="(c) => (searchInput = c)"
            :placeholder="`Search ${column.dataIndex}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="
              (e) => setSelectedKeys(e.target.value ? [e.target.value] : [])
            "
            @pressEnter="
              () => handleSearch(selectedKeys, confirm, column.dataIndex)
            "
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
            @click="() => handleSearch(selectedKeys, confirm, column.dataIndex)"
          >
            搜索
          </a-button>
          <a-button
            size="small"
            style="width: 90px"
            @click="() => handleReset(clearFilters)"
          >
            重置
          </a-button>
        </div>
        <a-icon
          slot="filterIcon"
          slot-scope="filtered"
          type="search"
          :style="{ color: filtered ? '#108ee9' : undefined }"
        />
        <template slot="customRender" slot-scope="text, record, index, column">
          <span v-if="searchText && searchedColumn === column.dataIndex">
            <template
              v-for="(fragment, i) in text
                .toString()
                .split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i'))"
            >
              <mark
                v-if="fragment.toLowerCase() === searchText.toLowerCase()"
                :key="i"
                class="highlight"
                >{{ fragment }}</mark
              >
              <template v-else>{{ fragment }}</template>
            </template>
          </span>
          <template v-else>
            {{ text }}
          </template>
        </template>
      </a-table>
      <p>
        当前选择的司机ID：
        <a-tag color="blue">
          {{ carno }}
        </a-tag>
      </p>
    </a-modal>
  </div>
</template>

<script>
import axios from 'axios'
import qs from 'qs'

export default {
  props: ['data'],
  data() {
    return {
      show: true,
      carno: null,
      searchText: '',
      searchInput: null,
      searchedColumn: '',
      columns: [
        {
          title: '状态',
          width: 100,
          dataIndex: 'status',
          key: 'status',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) =>
            record.status
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        },
        {
          title: '速度',
          width: 100,
          dataIndex: 'speed',
          key: 'speed'
        },
        {
          title: '时间',
          width: 200,
          dataIndex: 'time',
          key: 'time',
          defaultSortOrder: 'descend', // 默认上到下为由大到小的顺序
          sorter: (a, b) => {
            return a.time > b.time ? 1 : -1
          }
        },
        {
          title: '经度',
          width: 200,
          dataIndex: 'lng',
          key: 'lng'
        },
        {
          title: '纬度',
          width: 200,
          dataIndex: 'lat',
          key: 'lat'
        },
        {
          title: '车辆标识',
          width: 300,
          dataIndex: 'carno',
          key: 'carno',
          scopedSlots: {
            filterDropdown: 'filterDropdown',
            filterIcon: 'filterIcon',
            customRender: 'customRender'
          },
          onFilter: (value, record) =>
            record.carno
              .toString()
              .toLowerCase()
              .includes(value.toLowerCase()),
          onFilterDropdownVisibleChange: (visible) => {
            if (visible) {
              setTimeout(() => {
                this.searchInput.focus()
              }, 0)
            }
          }
        }
      ]
    }
  },
  methods: {
    searchId() {
      this.$parent.roadPage = 1
      this.$parent.gpsPath = []
      this.$emit('change-marker', this.carno)
    },
    handleSearch(selectedKeys, confirm, dataIndex) {
      confirm()
      this.searchText = selectedKeys[0]
      this.searchedColumn = dataIndex
    },
    handleReset(clearFilters) {
      clearFilters()
      this.searchText = ''
    }
  },
  computed: {
    rowSelection() {
      return {
        type: 'radio',
        onChange: (selectedRowKeys, selectedRows) => {
          this.carno = selectedRows[0].carno
        }
      }
    }
  }
}
</script>
